<template>
  <c-log-tabs :source-id="$route.query.id">
    <div class="detail">
      <div v-if="$route.query.type" class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>委派施工单位管理</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click.native="goBack">返回</el-button>
        </div>
      </div>
      <c-section title="申请人信息">
        <c-list :column="3">
          <c-list-item type="input" label="申请人" :value="detail.applicantName" />
          <c-list-item type="input" label="申请人电话" :value="detail.phone" />
          <c-list-item type="input" label="申请时间" :value="detail.applicantTime" />
          <c-list-item type="input" :span="3" label="申请人部门" :value="handlerOrg(detail.orgDtos)" />
        </c-list>
      </c-section>
      <c-section title="门店信息">
        <c-list :column="3">
          <c-list-item type="input" label="所属办事处" :value="detail.officeName" />
          <c-list-item type="input" label="办事处性质" :value="detail.officeNature" />
          <c-list-item type="input" label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detail.bizmanType" />
          <c-list-item type="input" label="经销商姓名" :value="detail.customerName " />
          <c-list-item type="input" label="经销商电话" :value="detail.customerPhone" />
          <c-list-item type="input" label="客户编码" :value="detail.clientCode" />
          <c-list-item type="input" label="客户名称" :value="detail.clientName" />
          <c-list-item type="input" label="门店编码" :value="detail.shopCode" />
          <c-list-item type="input" label="门店名称" :value="detail.shopName" />
          <c-list-item type="input" label="门店档案面积" suffix="㎡" :value="constData.shopArea" />
          <c-list-item type="input" label="城市级别" dict-type-code="CITY_LEVEL" :value="detail.shopCityLevel" />
          <c-list-item type="input" label="门店类型" dict-type-code="SHOP_TYPE" :value="detail.shopType" />
          <c-list-item type="input" label="门店市场层级" dict-type-code="MARKET_LEVEL" :value="detail.shopMarketLevel" />
          <c-list-item type="input" label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="detail.businessStatus" />
          <c-list-item type="input" label="业务类型" dict-type-code="BIZ_TYPE" :value="detail.shopBizType" />
          <c-list-item type="input" label="门店详细地址" :value="detail.shopAddress" :span="2" />
        </c-list>
      </c-section>
      <c-section title="门店建设信息">
        <c-list :column="3">
          <c-list-item type="input" label="门店建设项目号" :value="detail.constCode" />
          <c-list-item type="input" label="报图类型" dict-type-code="MARKET_TYPE" :value="detail.marketType" />
          <c-list-item type="input" label="门店建设类型" dict-type-code="CONST_TYPE" :value="detail.constType" />
          <c-list-item type="input" label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detail.decorationRange" />
          <c-list-item type="input" label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationFormCal || detail.decorationForm" />
        </c-list>
      </c-section>
      <c-section title="装修信息">
        <c-list :column="3">
          <c-list-item type="input" label="装修任务号" :value="detail.decorationTaskCode" />
          <c-list-item type="input" label="装修进度" dict-type-code="DECORATION_SCHEDULE" :value="detail.schedule" />
          <c-list-item type="input" label="装修步骤" dict-type-code="SHOP_DECORATION_STEPS" :value="detail.steps" />
          <c-list-item type="input" label="预计进场装修时间" :value="detail.expectDecorationTime" />
          <c-list-item type="input" label="预计开业时间" :value="detail.expectOpenTime" />
          <c-list-item type="input" label="装修状态" dict-type-code="SHOP_DECORATION_STATE" :value="detail.state" />
          <c-list-item type="input" label="本次装修卖场面积" suffix="㎡" :value="detail.shopDecorationTotalArea" />
          <c-list-item type="input" label="本次装修门头面积" suffix="㎡" :value="detail.dheadDecorationTotalArea" />
          <c-list-item type="input" label="装修申请说明" :value="detail.expectDesc" :span="3" />
        </c-list>
      </c-section>

      <div class="qup-title-box"><span class="border" /><span>委派信息-已选择的施工单位</span></div>
      <template>
        <el-table
          :data="appointLogData"
          style="width: 100%"
        >
          <el-table-column prop="delegateBatch" label="委派批次" width="90" />
          <el-table-column prop="delegateTime" label="委派时间" width="180" />
          <el-table-column prop="customerConfirmResult" label="经销商确认结果" width="180">
            <template slot-scope="scope">
              {{ scope.row.customerConfirmResult===0||scope.row.customerConfirmResult===1?(scope.row.customerConfirmResult===1?'同意':'不同意'):'' }}
            </template>
          </el-table-column>
          <el-table-column prop="customerConfirmAdvice" label="经销商确认意见" width="180" />

          <!-- <el-table-column prop="constUnitCode" label="施工单位编码" width="180" /> -->
          <el-table-column prop="unitName" label="施工单位名称" width="180" />
          <el-table-column prop="principal" label="负责人" width="180" />
          <el-table-column prop="principalPhone" label="负责人电话" width="180" />
          <el-table-column prop="delegateDesc" label="委派描述" min-width="100" />
        </el-table>
      </template>
      <div class="qup-title-box"><span class="border" /><span>异常处理记录</span></div>
      <el-table
        :data="exceptionList"
        style="width: 100%"
      >
        <el-table-column prop="createBy" label="操作人" width="90" />
        <el-table-column prop="createTime" label="操作时间" width="180" />
        <el-table-column prop="remark" label="备注" min-width="180" />
      </el-table>
      <div style="color:#999;text-align:center">没有更多了</div>
    </div>
  </c-log-tabs>
</template>

<script>

import { getConstData } from '@/api/common'
import { getGetOneByid, postSelectByModelId, postPageByTecTaskCode, getExpetionList } from '@/api/decorate'
export default {
  name: 'AppointDetail',
  components: {
  },
  data() {
    return {
      drawData: [],
      appointLogData: [],
      exceptionList: [], // 异常处理记录
      // files: [],
      detail: {
        startCondition: {},
        designPictureDTOS: []
      },
      tableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: 120,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            width: 100,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'PIC_TYPE'
            }
          },
          {
            prop: 'designRange',
            label: '设计范围',
            width: 120,
            propEnum: {
              appCode: 'slm',
              domainCode: 'marketing',
              dictTypeCode: 'DECORATION_RANGE'
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            width: 120,
            render: (h, row) => {
              return h('c-dict-range-view', { props: { dictTypeCode: 'DECORATION_FORM', value: row.decorationType }})
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 120,
            render: (h, row) => {
              return h('c-design-area', { props: { value: row.designSpace }})
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            width: 120,
            render: (h, row) => {
              return h('c-dict-range-view', { props: { dictTypeCode: 'BIZ_TYPE', value: row.designBizType }})
            }
            // propEnum: {
            //   appCode: 'slm',
            //   domainCode: 'marketing',
            //   dictTypeCode: 'BIZ_TYPE'
            // }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            width: 100
          },
          // {
          //   prop: 'endProArea',
          //   label: '成品面积'
          // },
          // {
          //   prop: 'allCustomizedArea',
          //   label: '定制面积'
          // },
          // {
          //   prop: 'overCupboardArea',
          //   label: '橱柜面积'
          // },
          // {
          //   prop: 'bathroomArea',
          //   label: '卫浴面积'
          // },
          // {
          //   prop: 'modelRoomArea',
          //   label: '样板间面积'
          // }
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120'
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120'
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            width: 120
          }
        ]
      },
      appointLogTableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'delegateBatch',
            label: '委派批次',
            width: 100
          },
          {
            prop: 'delegateTime',
            label: '委派时间',
            width: 140,
            formatData: this.$parseTimeYMD('delegateTime')
          },
          {
            prop: 'customerConfirmResult',
            label: '经销商确认结果',
            minWidth: 120,
            formatData: v => {
              if (v.customerConfirmResult === 0) {
                return '不同意'
              } else if (v.customerConfirmResult === 1) {
                return '同意'
              }
            }
          },
          {
            prop: 'customerConfirmAdvice',
            label: '经销商确认意见',
            minWidth: 120
          },
          {
            prop: 'unitName',
            label: '委派施工单位',
            minWidth: 160
          }
        ]
      },
      scoreTableConfig: {
        interfacePath: '',
        setting: [
          {
            prop: 'detailItem',
            label: '考核明细'
          },
          {
            prop: 'grading',
            label: '评分标准'
          },
          {
            prop: 'scoreDesc',
            label: '评分说明'
          }
        ]
      },
      constData: {} // 设计信息
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    // 处理编辑数据
    handlerEditData(data) {
      const startCondition = this.$split(data.startCondition)
      data.startCondition = {}
      for (const key of startCondition) {
        data.startCondition[key] = true
      }
      // 范围
      data.range = this.$split(data.range)
      data.shopBizType = this.$split(data.shopBizType)
      return data
    },
    getDetail() {
      const { id, taskCode, constCode } = this.$route.query
      if (!id) return
      getGetOneByid(id).then(res => {
        this.detail = this.handlerEditData(res.data)
        this.getDesignInfo(constCode || res.data.constCode)
      })
      postSelectByModelId(id).then(res => {
        this.drawData = res.data
      })
      postPageByTecTaskCode(taskCode).then(res => {
        this.appointLogData = res.data.records
      })
      getExpetionList(id).then(res => {
        this.exceptionList = res.data.records
      })
      // getShopAttachment(id).then(res => {
      //   this.files = res.data
      // })
    },
    handlerOrg(data) {
      if (!data) return ''
      return data.map(row => row.orgName)
    },
    // 获取设计信息
    getDesignInfo(constCode) {
      if (!constCode) {
        this.constData = {}
        return
      }
      getConstData(constCode).then(res => {
        if (res.success && res.data.records.length > 0) {
          this.constData = res.data.records[0]
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    toDetail(row) {
      this.$router.push({ name: 'ShopDrawingDetail', query: { id: row.id }})
    }
  }
}
</script>
<style lang="scss" scoped>
.detail{
margin-bottom: 10px;
}
</style>
